<template>
  <div class="table">
    <el-dialog
      center
      title="导入商品"
      v-model="dialogVisible"
      width="50%"
      size="mini"
      destroy-on-close
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div style="display: flex">
        <MainSearch placeholder="搜索商品名称"></MainSearch>
        <div style="color: #9a9a9a; padding: 10px">
          已选择{{}}件商品，还可以选择{{}}件商品
        </div>
      </div>

      <el-table
        :data="tableData"
        height="500"
        style="width: 100%"
        @selection-change="handleSelect"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="图片" width="100">
          <template #default="scope">
            <img
              style="width: 88px; height: 88px"
              :src="scope.row.ImgUrl"
              alt=""
            />
          </template>
        </el-table-column>
        <template v-for="item in tableItems" :key="item.lable">
          <el-table-column
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
          ></el-table-column>
        </template>

        <!-- <template v-for="item in tableItems" :key="item.lable">
          <el-table-column :label="item.label" :width="item.width">
            <template #default="scope">{{ scope.row.item.scopes }}</template>
          </el-table-column>
        </template> -->
      </el-table>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="changeVisibility(false)">取消</el-button>
          <el-button @click="addShop" type="primary">添加</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType, ref } from 'vue'
import { ITableItem } from '../types'
import MainSearch from '@/components/main-header/src/main-search.vue'

export default defineComponent({
  components: { MainSearch },
  emits: ['myAddShop'],
  props: {
    tableItems: {
      type: Array as PropType<ITableItem[]>,
      default: () => [],
    },
    tableData: {
      type: Array,
      default: () => [],
    },
  },
  setup(props, { emit }) {
    let GoodsIds: number[] = []
    // 显示
    let dialogVisible = ref(true)
    // 发送事件
    const addShop = () => {
      emit('myAddShop', GoodsIds)
    }
    // 选择数据
    const handleSelect = (val: any) => {
      GoodsIds = []
      val.forEach((item: any) => GoodsIds.push(item.GoodsId))
      console.log(GoodsIds)
    }

    // 隐藏dialog
    function changeVisibility(e: boolean) {
      dialogVisible.value = e
    }
    return { dialogVisible, GoodsIds, addShop, handleSelect, changeVisibility }
  },
})
</script>

<style scoped></style>
